import React,{ Component } from 'react';
import { connect } from 'react-redux';
import  { actionTypes } from './store/index';
import styles from './index.less';
import TopicWrapper from './TopicWrapper';
import ListWrapper from './ListWrapper';
import LunBoWrapper from './LunBoWrapper';
import AuthorWrapper from './AuthorWrapper';
import BackTop  from '../common/backTop';
import  Header  from '../common/header';
class Home extends Component{
    mouserOver(){
        document.getElementById('download').style.visibility="visible";
    }
    mouseLeave(){
        document.getElementById('download').style.visibility="hidden";
    }
    render(){
        return(
            <div>
                <Header/>
                <div className={styles.homeBox }>
                    <div className={styles.contentLift}>
                        <LunBoWrapper/>
                        <div className={styles.splitLine}></div>
                        <ListWrapper/>
                    </div>
                    <div className={styles.contentRight}>
                        <TopicWrapper/>
                        <div className={`${styles.clearfix} ${styles.APPImg}`} onMouseOver={() => this.mouserOver()} 
                            onMouseLeave={() => this.mouseLeave()}>
                            <a className={styles.download} href='#'>
                                <img alt='' src='../assets/download.png'/>
                            </a>
                            <div id='download' className={styles.hoveStyle}>
                                <div className={styles.cube}></div>
                                <img alt='' src='../assets/download.png'/>
                            </div>
                            <div className={styles.downloadContent}>
                                <div className={styles.title}>"下载简书手机App"
                                    <i className="iconfont ic-link"></i>
                                </div>
                                <div className={styles.title2}>随时随地发现和创作内容</div>
                            </div>
                        </div>
                        <div className={styles.advert}>
                            <img src='../assets/ad1.jpg'/>
                        </div>
                        <AuthorWrapper>
                            <div className={ styles.author }></div>
                        </AuthorWrapper>
                        <div className={styles.advert}>
                            <img src='../assets/ad2.jpg'/>
                        </div>
                    </div>
                    <BackTop/>
                </div>
            </div>
        )}
    componentDidMount(){
        this.props.getHomeState()
    }
};

const mapDispatch = (dispatch) =>({
    getHomeState(){
        dispatch(actionTypes.getHomeInfo())
    }
})
export default connect(null,mapDispatch)(Home);